<template>
	<view>
		<!-- tab选项卡 -->
		<view class="tabs">
			<view :class="tab_index == key ? 'tabs-item order-active' : 'tabs-item'" v-for="(item,key) in tabs" @tap="changeState(key)">{{item.name}}</view>
		</view>
		<!-- 订单列表 -->
		<view>
			<view class="empty">
				<i class="icon">&#xe612;</i>
				<view>暂无记录</view>
				<button @tap="toIndex">去逛逛~</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				tabs : [
					{
						state : '',
						name : '未付款'
					},
					{
						state : '',
						name : '待发货'
					},
					{
						state : '',
						name : '待收货'
					},
					{
						state : '',
						name : '已完成'
					}
				],
				tab_index : 0,
			}
		},
		onLoad(e) {
			this.tab_index = e.state ? e.state : 0;
		},
		methods:{
			changeState(key){
				this.tab_index = key;
			},
			toIndex(){
				uni.switchTab({
					url:'../index/index'
				})
			}
		}
	}
</script>

<style>
	.tabs{position: fixed;top:0;left:0;height:100upx;background: #FFFFFF;width: 100%;box-shadow: 0 1px 1px rgba(26, 26, 26, .2);}
	.tabs-item{float: left;width: 25%;text-align: center;height:99upx;line-height: 99upx;font-size: 35upx;}
	.order-active{color:#409EFF;border-bottom: 1upx solid #409EFF;}
	.empty{text-align: center;margin-top:150upx;color:#666666;font-size: 30upx;}
	.empty .icon{font-size: 120upx;color:#999999}
	.empty > view{margin-top: 20upx;}
	.empty button{height:80upx;line-height: 80upx;background: #409EFF;color:#FFFFFF;border:none;width:50%;border-radius: 40upx;margin-top:50upx}
</style>
